<template>
  <div class="notice-page">
    <h2 class="content-title">通知公告</h2>
    
    <div class="notice-list">
      <div class="notice-item" v-for="(notice, index) in noticeList" :key="index" @click="showNoticeDetail(notice)">
        <div class="notice-icon" :class="notice.type">
          <i class="el-icon-bell" v-if="notice.type === 'announcement'"></i>
          <i class="el-icon-document" v-else-if="notice.type === 'recruitment'"></i>
          <i class="el-icon-news" v-else-if="notice.type === 'press'"></i>
          <i class="el-icon-star-on" v-else-if="notice.type === 'event'"></i>
          <i class="el-icon-trophy" v-else></i>
        </div>
        <div class="notice-content">
          <div class="notice-header">
            <h3 class="notice-title">{{ notice.title }}</h3>
            <span class="notice-date">{{ notice.date }}</span>
          </div>
          <div class="notice-type-tag" :class="notice.type">{{ getNoticeTypeText(notice.type) }}</div>
          <p class="notice-summary">{{ notice.summary }}</p>
        </div>
      </div>
    </div>

    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="100"
        :current-page="1"
        :page-size="10">
      </el-pagination>
    </div>

    <!-- 通知详情弹窗 -->
    <el-dialog
      title="通知详情"
      :visible.sync="dialogVisible"
      width="50%">
      <div v-if="currentNotice" class="notice-detail">
        <h2 class="notice-detail-title">{{ currentNotice.title }}</h2>
        <div class="notice-detail-meta">
          <span class="notice-detail-date">发布时间：{{ currentNotice.date }}</span>
          <span class="notice-detail-type">{{ getNoticeTypeText(currentNotice.type) }}</span>
        </div>
        <div class="notice-detail-content" v-html="currentNotice.content"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'NoticePage',
  data() {
    return {
      dialogVisible: false,
      currentNotice: null,
      noticeList: [
        {
          title: '关于中空领航2023年度股东大会的通知',
          date: '2023-05-20',
          type: 'announcement',
          summary: '兹定于2023年6月15日上午10时在深圳市南山区科技园中空领航大厦19楼会议中心召开2023年度股东大会，请各位股东准时出席。',
          content: `
            <p>各位股东：</p>
            <p>兹定于2023年6月15日上午10时在深圳市南山区科技园中空领航大厦19楼会议中心召开2023年度股东大会，会议内容如下：</p>
            <h4>一、会议议程</h4>
            <ol>
              <li>审议《公司2022年度董事会工作报告》</li>
              <li>审议《公司2022年度监事会工作报告》</li>
              <li>审议《公司2022年度财务决算报告》</li>
              <li>审议《公司2023年度财务预算报告》</li>
              <li>审议《公司2022年度利润分配方案》</li>
              <li>审议《公司2023年度董事、监事薪酬方案》</li>
              <li>审议《关于公司2023年度日常关联交易预计的议案》</li>
              <li>审议《关于续聘会计师事务所的议案》</li>
            </ol>
            <h4>二、会议出席对象</h4>
            <ol>
              <li>截至2023年6月8日下午收市时在中国证券登记结算有限责任公司深圳分公司登记在册的本公司股东</li>
              <li>公司董事、监事和高级管理人员</li>
              <li>公司聘请的律师</li>
            </ol>
            <h4>三、会议登记方法</h4>
            <p>请各位股东于2023年6月12日前完成会议登记。</p>
            <p>特此通知。</p>
            <p style="text-align: right;">中空领航科技股份有限公司董事会</p>
            <p style="text-align: right;">2023年5月20日</p>
          `
        },
        {
          title: '中空领航2023年校园招聘启动公告',
          date: '2023-05-15',
          type: 'recruitment',
          summary: '中空领航2023年校园招聘正式启动，面向全国重点高校招聘算法工程师、软件开发工程师、产品经理等多个岗位，欢迎优秀毕业生加入。',
          content: `
            <h3>中空领航2023年校园招聘正式启动</h3>
            <p>中空领航是国内领先的智能交通解决方案提供商，致力于用科技创新改变城市出行。随着公司业务的快速发展，我们诚邀全国各高校优秀毕业生加入我们的团队，共创未来！</p>
            <h4>招聘岗位：</h4>
            <ol>
              <li>算法工程师（15人）</li>
              <li>软件开发工程师（20人）</li>
              <li>产品经理（8人）</li>
              <li>交通规划师（5人）</li>
              <li>UI/UX设计师（3人）</li>
              <li>项目实施工程师（10人）</li>
              <li>市场营销专员（6人）</li>
            </ol>
            <h4>招聘流程：</h4>
            <p>1. 简历投递：即日起至2023年6月30日</p>
            <p>2. 笔试：2023年7月上旬</p>
            <p>3. 面试：2023年7月中下旬</p>
            <p>4. Offer发放：2023年8月</p>
            <h4>应聘方式：</h4>
            <p>请登录中空领航招聘官网(https://hr.zhongkong.com)投递简历，或发送简历至recruitment@zhongkong.com，邮件标题请注明"2023校招+应聘岗位+姓名+学校"。</p>
            <p>期待您的加入！</p>
          `
        },
        {
          title: '中空领航荣获2023年度国家科学技术进步奖',
          date: '2023-05-08',
          type: 'press',
          summary: '在近日公布的2023年度国家科学技术奖励名单中，由中空领航牵头完成的"城市交通数字孪生关键技术与应用"项目荣获国家科学技术进步奖二等奖。',
          content: `
            <h3>中空领航荣获2023年度国家科学技术进步奖</h3>
            <p>在近日公布的2023年度国家科学技术奖励名单中，由中空领航联合清华大学、同济大学、中国交通科学研究院等单位共同完成的"城市交通数字孪生关键技术与应用"项目荣获国家科学技术进步奖二等奖。</p>
            <p>该项目经过五年攻关，突破了交通系统高精度建模、多源数据融合、场景自动构建等关键技术，构建了可视化、可模拟、可预测、可评估、可优化的城市交通数字孪生体系，已在全国20余个城市成功应用，有效提升了城市交通治理能力和水平。</p>
            <p>公司董事长在获奖后表示，此次获奖是对中空领航技术创新能力的高度认可，公司将继续深耕智能交通领域，推动科技成果转化，为解决城市交通问题贡献更多力量。</p>
          `
        },
        {
          title: '中空领航2023创新技术开放日活动预告',
          date: '2023-04-25',
          type: 'event',
          summary: '中空领航将于2023年6月1-2日举办"创新技术开放日"活动，向公众展示公司最新技术成果和产品，包括交通数字孪生平台、AI信号控制系统等。',
          content: `
            <h3>中空领航2023创新技术开放日活动预告</h3>
            <p>为促进行业交流，展示公司最新技术成果，中空领航定于2023年6月1-2日举办"创新技术开放日"活动。</p>
            <h4>活动亮点：</h4>
            <ol>
              <li>数字孪生交通平台现场演示</li>
              <li>AI交通信号控制系统实时体验</li>
              <li>城市交通运行态势分析系统展示</li>
              <li>未来交通场景沉浸式体验</li>
              <li>行业专家深度交流圆桌会</li>
            </ol>
            <h4>活动详情：</h4>
            <p>时间：2023年6月1-2日（9:00-17:00）</p>
            <p>地点：深圳市南山区科技园中空领航大厦</p>
            <p>参与方式：请于5月25日前通过公司官网报名，或发送邮件至event@zhongkong.com，名额有限，报满为止。</p>
            <p>欢迎各界人士踊跃参与！</p>
          `
        },
        {
          title: '关于中空领航与北京交通大学共建"智能交通联合实验室"的公告',
          date: '2023-04-10',
          type: 'announcement',
          summary: '中空领航与北京交通大学签署战略合作协议，共建"智能交通联合实验室"，双方将在基础研究、技术研发、成果转化等方面开展全面合作。',
          content: `
            <h3>关于中空领航与北京交通大学共建"智能交通联合实验室"的公告</h3>
            <p>为推动产学研深度融合，加速科技成果转化，中空领航与北京交通大学于2023年4月8日正式签署战略合作协议，共建"智能交通联合实验室"。</p>
            <p>根据协议，双方将重点在以下几个方面开展合作：</p>
            <ol>
              <li>共同开展智能交通前沿技术研究，包括交通数字孪生、智能信号控制、交通大数据分析等方向</li>
              <li>联合培养智能交通领域高层次人才，设立研究生工作站</li>
              <li>建立科研成果转化通道，促进技术创新与产业应用的无缝衔接</li>
              <li>共同承担国家重大科研项目，解决行业关键技术难题</li>
            </ol>
            <p>此次合作是公司践行产学研融合发展战略的重要举措，有利于提升公司核心技术竞争力，为公司长期可持续发展奠定坚实基础。</p>
          `
        }
      ]
    }
  },
  methods: {
    getNoticeTypeText(type) {
      const typeMap = {
        'announcement': '公司公告',
        'recruitment': '招聘信息',
        'press': '新闻动态',
        'event': '活动预告'
      };
      return typeMap[type] || '通知公告';
    },
    showNoticeDetail(notice) {
      this.currentNotice = notice;
      this.dialogVisible = true;
    }
  }
}
</script>

<style scoped>
.notice-page {
  max-width: 100%;
}

.content-title {
  font-size: 28px;
  color: var(--primary-color);
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 15px;
}

.content-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: var(--secondary-color);
}

.notice-list {
  margin-bottom: 40px;
}

.notice-item {
  display: flex;
  padding: 20px;
  margin-bottom: 15px;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.notice-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.notice-icon {
  flex: 0 0 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

.notice-icon.announcement {
  background-color: #2196F3;
}

.notice-icon.recruitment {
  background-color: #4CAF50;
}

.notice-icon.press {
  background-color: #9C27B0;
}

.notice-icon.event {
  background-color: #FF5722;
}

.notice-content {
  flex: 1;
}

.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.notice-title {
  font-size: 18px;
  color: var(--text-color);
  margin: 0;
  flex: 1;
  padding-right: 20px;
}

.notice-date {
  font-size: 14px;
  color: #999;
}

.notice-type-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  color: white;
  font-size: 12px;
  margin-bottom: 10px;
}

.notice-type-tag.announcement {
  background-color: #2196F3;
}

.notice-type-tag.recruitment {
  background-color: #4CAF50;
}

.notice-type-tag.press {
  background-color: #9C27B0;
}

.notice-type-tag.event {
  background-color: #FF5722;
}

.notice-summary {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

/* 通知详情样式 */
.notice-detail {
  padding: 20px 0;
}

.notice-detail-title {
  font-size: 24px;
  color: var(--primary-color);
  margin-bottom: 20px;
  text-align: center;
}

.notice-detail-meta {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  color: #999;
}

.notice-detail-date {
  margin-right: 20px;
}

.notice-detail-type {
  color: var(--secondary-color);
}

.notice-detail-content {
  line-height: 1.8;
  color: #333;
}

.notice-detail-content h3,
.notice-detail-content h4 {
  margin-top: 20px;
  margin-bottom: 15px;
  color: var(--text-color);
}

.notice-detail-content p {
  margin-bottom: 15px;
}

.notice-detail-content ol {
  padding-left: 20px;
  margin-bottom: 15px;
}

.notice-detail-content li {
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .notice-item {
    flex-direction: column;
  }
  
  .notice-icon {
    margin-bottom: 15px;
    margin-right: 0;
  }
  
  .notice-header {
    flex-direction: column;
  }
  
  .notice-date {
    margin-top: 5px;
  }
}
</style> 